<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        
        <ui:define name="title">
            Fornecedor
        </ui:define>

        <ui:define name="content">
            <h:form id="cadastrarFornecedorForm">

                <p:messages id="cadastrarFornecedorMessages" autoUpdate="true" />

                <p:fieldset legend="Dados" id="dadosFornecedorPanel">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="nomeFantasiaInputText" value="#{ managerCriarPessoa.pessoa.nome }"
                                required="true" requiredMessage="Nome Fantasia é obrigatório" />                                
                        </div>
                    </div>

                    <div class="row">    
                        <div class="column2">
                            <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                        </div>
                        <div class="column10">
                            <p:inputText id="razaoSocialInputText" value="#{ managerCriarPessoa.pessoa.razaoSocial }"
                                required="true" requiredMessage="Razão é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                        </div>
                        <div class="column5">
                            <p:inputMask id="cnpjInputMask" value="#{ managerCriarPessoa.pessoa.cnpj  }"
                                required="false" requiredMessage="CNPJ é obrigatório" mask="99.999.999/9999-99" />                                
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Responsável" for="responsavelInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="responsavelInputText" value="#{ managerCriarPessoa.pessoa.responsavel  }" />
                        </div>
                        <div class="column1">
                            <p:outputLabel value="Email" for="emailInputText" />
                        </div>
                        <div class="column4">
                            <p:inputText id="emailInputText" value="#{ managerCriarPessoa.pessoa.email  }"/>
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Endereço" id="enderecoFieldset">

                    <div class="row">                        
                        <div class="column2">
                            <p:outputLabel value="Zona" for="zonaSelectOneMenu" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="zonaSelectOneMenu" value="#{ managerCriarPessoa.pessoa.endereco.zona }">
                                <f:selectItems value="#{ enums.zonasImovel() }" />
                                <p:ajax event="change" update=":cadastrarFornecedorForm:localidadeInputText, :cadastrarFornecedorForm:zonaOutputLabel" />
                            </p:selectOneMenu>
                        </div>                        
                    </div>                    
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoEnderecoInputText" value= "#{ managerCriarPessoa.pessoa.endereco.tipo }">
                                <f:selectItems value= "#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                        
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoLogradouroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.tipoLogradouro }">
                                <f:selectItems value= "#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.numero }"/>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Logradouro" for="logradouroInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="logradouroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.logradouro }" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="cidadeAutoComplete" value= "#{ managerCriarPessoa.pessoa.endereco.cidade }"
                                            forceSelection="true" dropdown="true" var="cidade" itemValue= "#{ cidade }" 
                                            itemLabel= "#{ cidade.nome }" completeMethod= "#{ managerCriarPessoa.autocompletarCidade }"
                                            converter="conversorcidade" minQueryLength="3" required="true" requiredMessage="Cidade é obrigatório"> 
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@this, :cadastrarFornecedorForm:bairroAutoComplete" />
                            </p:autoComplete>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroAutoComplete" />
                        </div>
                        <div class="column5">
                            <p:autoComplete id="bairroAutoComplete" value= "#{ managerCriarPessoa.pessoa.endereco.bairro }"
                                            forceSelection="true" dropdown="true" var="bairro" itemValue= "#{ bairro }" 
                                            itemLabel= "#{ bairro.nome }" completeMethod= "#{ managerCriarPessoa.autocompletarBairro }"
                                            disabled= "#{ managerCriarPessoa.pessoa.endereco.cidade == null }"
                                            converter="conversorbairro" minQueryLength="3" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepInputMask" />
                        </div>
                        <div class="column3">
                            <p:inputMask id="cepInputMask" value= "#{ managerCriarPessoa.pessoa.endereco.cep }"
                                         mask="99.999-999" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Localidade" for="localidadeInputText" id="zonaOutputLabel"
                                           style="#{ managerCriarPessoa.pessoa.endereco.zona == 'RURAL' ? 'diplay: block' : 'display: none' }" />
                        </div>
                        <div class="column5">
                            <p:inputText id="localidadeInputText" value="#{ managerCriarPessoa.pessoa.endereco.localidade }"
                                         style="#{ managerCriarPessoa.pessoa.endereco.zona == 'RURAL' ? 'diplay: block' : 'display: none' }"/>
                        </div>
                    </div>

                </p:fieldset>

                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarPessoa.salvarFornecedor() }" value="Salvar"
                        update="@form" icon="ui-icon-disk" oncomplete="widthFix();"  
                        styleClass="ui-priority-primary" onsuccess="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarFornecedor.xhtml" />
                </div>

            </h:form>

        </ui:define>
    </ui:composition>

</html>
